
function loadRouteTree(json,injectinto) {

	//Create a new ST instance  
	var st = new $jit.ST({  
		//id of viz container element  
		injectInto: injectinto,  
		//set duration for the animation  
		duration: 200,  
		//set animation transition type  
		transition: $jit.Trans.Quart.easeInOut,  
		//set distance between node and its children  
		levelDistance: 40,  
		levelsToShow: 10, 
		'width': 1400,
        'height': 1000,
		offsetX: -200,
		offsetY: 450,
		//enable panning  
		Navigation: {  
		  enable:true,  
		  panning:true  
		},  
		//set node and edge styles  
		//set overridable=true for styling individual  
		//nodes or edges  
		Node: {  
			height: 48,  
			width: 80,  
			type: 'rectangle',  
			color: '#daa',  
			overridable: true  
		},  
		  
		Edge: {  
			type: 'bezier',  
			overridable: true  
		},  
		  
		orientation:"top",
		
		// onBeforeCompute: function(node){  
			// Log.write("loading " + node.name);  
		// },  
		  
		// onAfterCompute: function(){  
			// Log.write("done");  
		// },  
		  
		//This method is called on DOM label creation.  
		//Use this method to add event handlers and styles to  
		//your node.  
		onCreateLabel: function(label, node){  
			label.id = node.id;              
			label.innerHTML = node.name;  
			label.onclick = function(){  
				// if(normal.checked) {  
				  st.onClick(node.id);   
				// } else {  
				// st.setRoot(node.id, 'animate');  
				// }  
			};  
			//set label styles  
			var style = label.style;  
			style.width = 80 + 'px';  
			style.height = 48 + 'px';              
			style.cursor = 'pointer';  
			style.color = '#333';  
			style.fontSize = '0.7em';  
			style.textAlign= 'center';  
			style.paddingTop = '3px';  
		},  
		  
		//This method is called right before plotting  
		//a node. It's useful for changing an individual node  
		//style properties before plotting it.  
		//The data properties prefixed with a dollar  
		//sign will override the global node style properties.  
		onBeforePlotNode: function(node){  
			//add some color to the nodes in the path between the  
			//root node and the selected node.  
			if (node.selected) {  
				node.data.$color = "#ff7";
			} 
			else {  
				delete node.data.$color;  
				//if the node belongs to the last plotted level  
				if(!node.anySubnode("exist")) {  
					//count children number  
					var count = 0;  
					node.eachSubnode(function(n) { count++; });  
					//assign a node color based on  
					//how many children it has  
					node.data.$color = ['#aaa', '##daa', '#caa', '#daa', '#eaa', '#faa'][count];                      
				}  
			}  
		},  
		  
		//This method is called right before plotting  
		//an edge. It's useful for changing an individual edge  
		//style properties before plotting it.  
		//Edge data proprties prefixed with a dollar sign will  
		//override the Edge global style properties.  
		onBeforePlotLine: function(adj){  
			if (adj.nodeFrom.selected && adj.nodeTo.selected) {  
				adj.data.$color = "#eed";  
				adj.data.$lineWidth = 3;  
			}  
			else {  
				delete adj.data.$color;  
				delete adj.data.$lineWidth;  
			}  
		}  
	});  
	
	// var json ="{  \"id\": \"node02\", \"name\": \"0.2\", \"data\": { },\"children\": [{\"id\": \"node12\",\"name\": \"1.3\",\"data\": {},\"children\": [{\"id\": \"node19\",\"name\": \"1.4\",\"data\": {},\"children\": [{\"id\": \"node13\",\"name\": \"1.5\",\"data\": {}}]}]}]}";
	

	
	
	//load json data  
	st.loadJSON(eval( '(' + json + ')' ));  
	//compute node positions and layout  
	st.compute();  
	//optional: make a translation of the tree  
	st.geom.translate(new $jit.Complex(-200, 0), "current");  
	//emulate a click on the root node.  
	st.onClick(st.root);

}